<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>tab&slider&$accordion&photo-viewer</title>
    <link rel="shortcut icon" href="../../../../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../../css/content-panels.css">
</head>

<body>
    <div id="share">
        <a id="link">❤</a>
    </div>
    <div id="model">
        <div id="model-content">
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium, dolor!</p>
        </div>
        <button class="btn btn-danger" id="model-btn">close</button>
    </div>
    <div class="container">
        <h2>标签页</h2>
        <ul class="nav-tabs">
            <li class="active"><a href="javascript:0;">Home</a></li>
            <li><a href="javascript:0;">Profile</a></li>
            <li><a href="javascript:0;">Messages</a></li>
        </ul>
        <div class="tab-panel active" id="tab1">
            <p><strong>HOME</strong> Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, error optio.
                Nesciunt enim odio amet
                quas nobis. Amet, odit omnis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam aperiam
                in dolorum sed ab non rem numquam commodi vitae unde?</p>
        </div>
        <div class="tab-panel" id="tab2">
            <p><strong>Profile</strong> Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia corporis
                voluptas odit magni quas ab
                ducimus, ad veniam ea quia. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Asperiores quas
                rem, eaque odit tempora qui neque reiciendis ut ullam delectus!</p>
        </div>
        <div class="tab-panel" id="tab3">
            <p><strong>Messages</strong> Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque officiis illo
                incidunt tempora. Minima
                quisquam, ipsam unde sequi natus eum? Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Cupiditate iste voluptas est fugiat nostrum dicta totam vitae. Praesentium, reiciendis quidem!</p>
        </div>
    </div>
    <div class="container">
        <h2>手风琴</h2>
        <ul class="menu">
            <li>
                <button class="accordion-control">麻婆豆腐</button>
                <div class="accordion-panel">
                    <p>
                        主料：猪肉末50克、豆腐200克 <br>
                        辅料：豆瓣酱、蒜、姜、葱、豆豉、生抽、糖、花椒粉、鸡精 <br>
                        步骤：<br>
                        1.豆腐切块焯水备用。葱姜蒜切末，肉切碎。<br>
                        2.热锅入油后，加入肉末炒香取出，再加豆瓣酱，葱姜蒜豆豉炒香。<br>
                        3. 加入生抽，鸡精， 糖调味。<br>
                        4.放入豆腐、肉末和少量清汤，轻轻拌匀，中火烧制几分钟。<br>
                        5.待汤汁浓稠时，加少许湿淀粉勾芡，出锅撒上花椒粉、香葱末即可。
                    </p>
                </div>
            </li>
            <li>
                <button class="accordion-control">宫保鸡丁</button>
                <div class="accordion-panel">
                    <p>
                        材料：鸡脯肉、黄瓜、熟花生、料酒、葱、生抽、花椒、醋、糖、盐、淀粉 <br>
                        做法： <br>
                        1.鸡胸肉切丁，放生抽、盐、料酒拌匀 <br>
                        2.黄瓜切丁、葱要切成小段，干辣椒剪去两头，去除辣椒籽 <br>
                        3.在小碗中调入酱油、盐、白砂糖和料酒，混合均匀制成调味料汁 <br>
                        4.锅住油烧热后，放入花椒和干辣椒，用小火煸炸出香味 <br>
                        5.放入大葱段、鸡丁，放1汤匙料酒，炒到鸡肉变色 <br>
                        6.最后调入调好的料汁拌匀 <br>
                        7.再放入黄瓜丁、熟花生米，翻炒均匀 <br>
                        8.水淀粉勾芡，即可
                    </p>
                </div>
            </li>
            <li>
                <button class="accordion-control">蚂蚁上树</button>
                <div class="accordion-panel">
                    <p>
                        材料：粉条、瘦猪肉、食用油、酱油、料酒、豆瓣酱、白糖、精盐、味精 <br>
                        制作流程： <br>
                        1.先用温水将粉条泡软洗净； <br>
                        2.瘦肉洗净剁成肉末，葱洗净切花； <br>
                        3.锅内放油，烧热后加入肉末，放入少许豆瓣酱炒香肉末； <br>
                        4.加入粉条炒匀，调入料酒、酱油、白糖、盐和味精炒匀后即可。
                    </p>
                </div>
            </li>
        </ul>
    </div>
    <div class="container">
        <h2>图片查看器</h2>
        <div class="center">
            <div id="photo-viewer" class="is-loading">
            </div>
            <div id="thumbnails">
                <a href="./img/photo-1.jpg" class="thumb active" title="Elderberry Marshmallow">
                    <img src="img/thumb-1.jpg" alt="Elderberry Marshmallow">
                </a>
                <a href="./img/photo-2.jpg" class="thumb" title="Rose Marshmallow">
                    <img src="img/thumb-2.jpg" alt="Rose Marshmallow">
                </a>
                <a href="img/photo-3.jpg" class="thumb" title="Crysanthemum Marshmallow">
                    <img src="./img/thumb-3.jpg" alt="Crysanthemum Marshmallow">
                </a>
            </div>
        </div>
    </div>
    <div class="container">
        <h2>滑动块</h2>
        <div class="slide-container">
            <div class="slide-viewer">
                <div class="slide slide1"><a><img src="./img/slide-1.jpg" alt="slide"></a></div>
                <div class="slide slide2"><a><img src="./img/slide-2.jpg" alt="slide"></a></div>
                <div class="slide slide3"><a><img src="./img/slide-3.jpg" alt="slide"></a></div>
                <div class="slide slide4"><a><img src="./img/slide-4.jpg" alt="slide"></a></div>
            </div>
        </div>
        <div class="slide-buttons">
            <button type="button" class="slide-button active">●</button>
            <button type="button" class="slide-button">●</button>
            <button type="button" class="slide-button">●</button>
            <button type="button" class="slide-button">●</button>
        </div>
    </div>
    <div class="container">
        <h2>轮播图</h2>
        <div class="promo">
            <ul class="promo-bd">
                <li><a><img src="./img/slide-1.jpg" alt="slide"></a></li>
                <li><a><img src="./img/slide-2.jpg" alt="slide"></a></li>
                <li><a><img src="./img/slide-3.jpg" alt="slide"></a></li>
                <li><a><img src="./img/slide-4.jpg" alt="slide"></a></li>
            </ul>
            <div class="promo-ft">
                <div class="promo-opt">
                    <a class="opt-l"><span>&lt;</span></a>
                    <a class="opt-r"><span>&gt;</span></a>
                </div>
                <ol class="promo-nav"></ol>
            </div>
        </div>
    </div>
    <script src="../../js/content-panels.js"></script>
</body>

</html>